<template>
  <div class="layout-padding card-tabs font-mono">
    <div class="layout-padding-auto layout-padding-view">
      <!--region 1.查询表单-->
      <el-card shadow="hover" class="mb-2 padding-unset pt-3 pl-6" style="flex: 0 0 58px">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="query">
          <el-form-item :label="$t('so.socode')" prop="socode">
            <el-input v-model="state.queryForm.socode" clearable :placeholder="$t('so.entryso')" />
          </el-form-item>

          <el-form-item :label="$t('qms.barCode')" prop="inputBarcode">
            <el-input v-model="state.queryForm.inputBarcode" clearable :placeholder="$t('qms.barCode')" />
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="query"> {{ $t('so.query') }}</el-button>
            <el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <!--endregion-->

      <!--region 2.结果展示-->
      <splitpanes class="default-theme" style="height: calc(100% - 60px)">
        <pane size="40">
          <!-- #region 2.1.树形结构 -->
          <el-card class="card-box" shadow="hover">
            <template #header>
              <el-badge :value="state?.treeData?.length||0" type="warning" :offset="[7, 5]"
                        :show-zero="false">
                <el-text type="primary" size="large" class="font-black">
                  <el-icon size="">
                    <List />
                  </el-icon>
                  投料记录
                </el-text>
              </el-badge>
              <el-text type="info" style="margin-left: 16px;" size="small"> (条码-物料代码-物料名称-数量-投入工序)</el-text>
            </template>
            <treeList v-model="state.treeData" ref="treeListRef" :query="state.queryForm" @row-click="handleRowClick" />
          </el-card>
          <!-- #endregion -->
        </pane>
        <pane>
          <div class="layout-padding-auto layout-padding-view">
            <!-- #region 2.2.条码的详情-->
            <!--当前条码号,物料代码,物料名称,投料数量,产出消耗数量,产出工序,单位,投入时间,收料单号,供应商名称,送货单号,入库批次,生产批次-->
            <el-descriptions class="font-serif" :column="3" border>
              <template #title>
                <el-text size="large" type="primary" class="font-mono">
                  <el-icon size="16px">
                    <List />
                  </el-icon>
                  标签号:
                  <span class="italic border-b solid border-indigo-600"> {{
                      treeSelectRow?.inputBarcode || '' }} </span>
                </el-text>
              </template>
              <el-descriptions-item class-name="font-mono" label-align="center" label="当前条码号">
                {{ inputBarcodeFormatter(treeSelectRow?.inputBarcode) || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="物料代码">
                {{ treeSelectRow?.materialCode || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="物料名称">
                {{ treeSelectRow?.materialName || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="投料数量">
                {{ treeSelectRow?.qty || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="产出消耗数量">
                {{ treeSelectRow?.consumeQty || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="单位">
                {{ treeSelectRow?.unit || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="产出工序">
                {{ treeSelectRow?.produceProcessCode || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="投入时间">
                {{ treeSelectRow?.inputTime || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="收料单号">
                {{ treeSelectRow?.receiptCode || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="送货单号">
                {{ treeSelectRow?.asnNo || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="入库批次">
                {{ treeSelectRow?.stockBatch || '-' }}
              </el-descriptions-item>
              <el-descriptions-item class-name="font-mono" label-align="center" label="生产批次">
                {{ treeSelectRow?.produceBatch || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label-align="center" label="供应商名称">
                {{ treeSelectRow?.supplierName || '-' }}
              </el-descriptions-item>
            </el-descriptions>
            <!-- #endregion -->
            <!-- #region 2.3.投料记录-->
            <el-card class="card-box mt-2" shadow="hover">
              <template #header>
                <el-badge :value="treeSelectRow?.children?.length||0" type="warning" :offset="[7, 5]"
                          :show-zero="false">
                  <el-text size="large" type="primary" class="font-black">
                    <el-icon size="16px">
                      <SetUp />
                    </el-icon>
                    投料记录
                  </el-text>
                </el-badge>
              </template>
              <ChildrenList :data="treeSelectRow?.children || []"></ChildrenList>
            </el-card>
            <!-- #endregion -->
          </div>
        </pane>
      </splitpanes>
      <!--endregion-->
    </div>
  </div>
</template>

<script setup lang="ts">


// 动态引入 treeList组件
const treeList = defineAsyncComponent(() => import('./treeList.vue'));
const ChildrenList = defineAsyncComponent(() => import('./childrenList.vue'));

// 定义数据
const treeSelectRow = ref(null);

// 搜索变量
const queryRef = ref();
const treeListRef = ref(); // 引用 treeList 组件

// 组件状态
const state = reactive({
  queryForm: {},
  treeData: []
});

// 清空搜索条件
const resetQuery = () => {
  queryRef.value?.resetFields();
};

// 处理 treeList 的行点击事件
const handleRowClick = (row) => {
  console.log('Clicked row:', row);
  treeSelectRow.value = row;
};

// 修改查询方法以更新 treeList
const query = () => {
  // 手动触发 treeList 更新
  treeListRef.value?.updateTree();
};

function inputBarcodeFormatter(value) {
  // 如果是纯数字则显示`-`
  if (value && value.match(/^[0-9]+$/)) {
    return '-'
  } else {
    return value
  }
}
</script>
